import React from 'react';
import { Form, Input, Button, Switch, TreeSelect, Space, message } from 'antd';
import { SafetyCertificateOutlined } from '@ant-design/icons';
import { roleUserStore } from '../store/roleUserStore';
import { RoleUser } from '../store/types';

const { TextArea } = Input;

interface RoleUserFormProps {
  type: 'create' | 'edit' | 'view';
  initialValues?: any;
  onCancel: () => void;
}

const RoleUserForm: React.FC<RoleUserFormProps> = ({ type, initialValues, onCancel }) => {
  const [form] = Form.useForm();

  const onFinish = (values: RoleUser) => {
    roleUserStore.saveUser(values);
    onCancel();
  };

  const isViewMode = type === 'view';
  const isEditMode = type === 'edit';
  if(isViewMode || isEditMode){
    initialValues.roles = [initialValues?.roleId ];
    initialValues.users=[initialValues?.userId];
  }
  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
      initialValues={{
        ...initialValues,
        status: initialValues?.status === 'active',
      }}
      disabled={isViewMode}
    >
     
    <Form.Item
      label="用户"
      name={'users'}
      rules={[{ required: true, message: '请选择用户' }]}
    >
      <TreeSelect
        treeData={roleUserStore.userOptions}
        placeholder="请选择用户"
        treeCheckable={!isEditMode}
        showCheckedStrategy="SHOW_PARENT"
        style={{ width: '100%' }}
      />
    </Form.Item>

    <Form.Item
        label="角色"
        name={'roles'}
        rules={[{ required: true, message: '请选择角色' }]}
      >
        <TreeSelect
          treeData={roleUserStore.roleOptions}
          placeholder="请选择角色"
          treeCheckable={!isEditMode}
          showCheckedStrategy="SHOW_PARENT"
          style={{ width: '100%' }}
        />
      </Form.Item>

      {!isViewMode && (
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              {type === 'create' ? '创建' : '保存'}
            </Button>
            <Button onClick={onCancel}>取消</Button>
          </Space>
        </Form.Item>
      )}
    </Form>
  );
};

export default RoleUserForm; 